<template>
  <div>
    <div class="info-box">
      <div class="info-top">
<!--        <img :src="meta.dalle2" style="width: 50px;height: 50px" v-if="meta" alt=""/>-->
        <img src="../static/images/head.png" style="width: 50px;height: 50px" alt="" />
        <h2>{{"&nbsp;"}}{{"&nbsp;"}}{{ info.name }}</h2>
      </div>
      <div class="info-main">
        <div v-for="(item,index) in parameters.user_input_form" :key="index+'pre'">
          <div class="form-item" v-if="item.select">
            <div>
              <h3>{{ item.select.label }}：</h3>
            </div>
            <div class="form-input">
              <el-select
                  v-model="inputs[item.select.variable]"
                  :localdata="list_format(item.select.options)"
              >
                <el-option
                    v-for="item in list_format(item.select.options)"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item" v-if="item.text_input">
            <div>
              <h3>{{ item.text_input.label }}：</h3>
            </div>
            <div class="form-input">
              <el-input v-model="inputs[item.text_input.variable]" :placeholder="'请输入'+item.text_input.label" :maxlength="item.text_input.max_length"></el-input>
            </div>
          </div>
          <div class="form-item" v-if="item.number">
            <div>
              <h3>{{ item.number.label }}：</h3>
            </div>
            <div class="form-input">
              <el-input v-model="inputs[item.number.variable]" :placeholder="'请输入'+item.number.label" type="number"></el-input>
            </div>
          </div>
        </div>
        <div style="margin-top: 20px;text-align: center">
          <button style="width: 200px;height: 40px;border-radius: 15px;background-color: #eeeefd;border:none" @click="startChat">开启对话</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  props:{
    parameters:{
      default: null
    },
    info:{
      default: null
    },
    meta:{
      default: null
    }
  },
  data(){
    return{
      inputs: {},
    }
  },
  mounted() {
    this.createInput();
  },
  methods:{
    createInput(){
      this.parameters.user_input_form.forEach(item => {
        if (item.select){
          item.select.default && (this.inputs[item.select.variable] = item.select.default);
        }else if (item.text_input){
          item.text_input.default && (this.inputs[item.text_input.variable] = item.text_input.default);
        }else if (item.number){
          item.number.default && (this.inputs[item.number.variable] = item.number.default);

        }
      })
    },
    list_format(list){
      let _list = [];
      list.forEach(item =>{
        _list.push({
          value: item,
          text: item,
        })
      });
      return _list
    },
    startChat(){
      try {
        this.parameters.user_input_form.forEach(item => {
          if (item.select){
            if (item.select.required&&!this.inputs[item.select.variable]){
              throw new Error(item.select.label+'不能为空！')
            }
          }else if (item.text_input){
            if (item.text_input.required&&!this.inputs[item.text_input.variable]){
              throw new Error(item.text_input.label+'不能为空！')
            }
          }else if (item.number){
            if (item.number.required&&!this.inputs[item.number.variable]){
              throw new Error(item.number.label+'不能为空！')
            }
          }
        })
      } catch (e) {
        this.$message.warning(e.message);
        return
      }
      this.$emit("getInputs",this.inputs)
    }
  }
}

</script>

<style scoped>
.info-box{
  width: 800px;
  min-height: 200px;
  //padding: 40px;
  background-color: white;
  border-radius: 40px;
  box-shadow: rgba(50, 50, 93, 0.25) 0 13px 27px -5px, rgba(0, 0, 0, 0.3) 0 8px 16px -8px;
}
.info-top{
  display: flex;
  padding: 40px 40px 30px 40px;
}
.info-main{
  padding: 0 40px 40px 40px;
}
.form-item{
  display: flex;
  margin-bottom: 10px;
  padding-left: 110px;
}
.form-input{
  width: 400px;
  margin-left: 10px
}
</style>
